<style lang="less" scoped>
.jdsucai{
    .jdsucai_data{
      background: white;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      width: 61vw;
      margin-left: 18.5vw;
      min-height: 40vw;
      .xuanzedata{
        position:relative;
        .jdsucai_back{
          position:absolute;
          width: 61vw;
          height: 29.7vw;
          // height: 100%;
          // 50.3vw
        }
        .pdfdata0{
          position:absolute;
          opacity:0;
          cursor:pointer;
          background: black;
          width: 5.2vw;
          height: 8vw;
          left:9.2vw;
          top:7.5vw;
        }
        .pdfdata1{
          position:absolute;
          opacity:0;
          cursor:pointer;
          background: black;
          width: 5.2vw;
          height: 8vw;
          left:18.5vw;
          top:7.5vw;
        }
        .pdfdata2{
          position:absolute;
          opacity:0;
          cursor:pointer;
          background: black;
          width: 5.2vw;
          height: 8vw;
          left:27.8vw;
          top:7.5vw;
        }
        .pdfdata3{
          position:absolute;
          opacity:0;
          cursor:pointer;
          background: black;
          width: 5.2vw;
          height: 8vw;
          left:37.1vw;
          top:7.5vw;
        }
        .pdfdata4{
          position:absolute;
          opacity:0;
          cursor:pointer;
          background: black;
          width: 5.2vw;
          height: 8vw;
          left:46.5vw;
          top:7.5vw;
        }
        .pdftitle0{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:6.7vw;
          top:13.2vw;
        }
        .pdftitle1{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:16.1vw;
          top:13.2vw;
        }
        .pdftitle2{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:25.4vw;
          top:13.2vw;
        }
        .pdftitle3{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:34.7vw;
          top:13.2vw;
        }
        .pdftitle4{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:44vw;
          top:13.2vw;
        }
      }
      .fistimg{
        width:61vw;
        margin: 0px;
        padding: 0px;
      }
      .footimg{
        width:61vw;
        margin: 0px;
        padding: 0px;
        
      }
  }
}


</style>
<template>
  <div class="jdsucai">
    <MainUser></MainUser>
    <!-- <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw"> -->
      <MainTitle @sousuo="titleSousuo" ref="maintitle"></MainTitle>
    <!-- </affix> -->
    <div class="jdsucai_data">
      <div  v-for="(item,i) in layoutlistdata"
        v-if="i == 0">
        <el-image
          class="fistimg"
          :src="layoutlistdata[0].thumb"
          :fit="'cover'" ></el-image>
      </div>
      
      <div class="xuanzedata">
        <el-image
          class="jdsucai_back"
          :src="imgdata"
          :fit="'cover'" ></el-image>
        <div class="pdftitle0" >外景照片</div>
        <div class="pdftitle1" >基地照片</div>
        <div class="pdftitle2" >其他照片</div>
        <div class="pdftitle3" >品牌视频</div>
        <div class="pdftitle4" >其他视频</div>
        <div class="pdfdata0" @click="waijingzhaopian"></div>
        <div class="pdfdata1" @click="gongzuozhaopian"></div>
        <div class="pdfdata2" @click="qitazhaopian"></div>
        <div class="pdfdata3" @click="pingpaishiping"></div>
        <div class="pdfdata4" @click="qitashiping"></div>
      </div>
      <div style="height:29.7vw"></div>
      <div
        v-for="(item,i) in layoutlistdata"
        v-if="i > 0">
        <el-image
          class="footimg"
          :src="item.thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div style="height:3vw;"></div>
    </div>
    
  </div>
</template>
<script>
import { layoutlist } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
          imgdata:require("../../../images/sucaibeij.jpg"),
          layoutlistdata:[
          ],
        }
    },
    mounted() {
      this.getlayoutlist();
    },
    methods: {
      downmanual(id){
        let routeUrl = this.$router.resolve({
          path: 'jlb_manualdata',
          query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },
      //获取C经典案例列表数据
      getlayoutlist(){
          var param = {};
          param.page = 1;
          param.size = 50;
          param.page_id = 5;
          // param.keywords = this.keywords;
          layoutlist(param).then(res => {
            if(res.ok){
              this.layoutlistdata = res.data.data;
            }
          })
      },
      titleSousuo(keywords){
        // this.keywords = keywords;
        // this.getmanuallist();
      },
      waijingzhaopian(){
        let routeUrl = this.$router.resolve({
          path: 'jlb_sucaiimg',
          query: {'type': 1}
        });
        window.open(routeUrl.href, '_blank');
      },
      gongzuozhaopian(){
        let routeUrl = this.$router.resolve({
          path: 'jlb_sucaiimg',
          query: {'type': 2}
        });
        window.open(routeUrl.href, '_blank');
      },
      qitazhaopian(){
        let routeUrl = this.$router.resolve({
          path: 'jlb_sucaiimg',
          query: {'type': 3}
        });
        window.open(routeUrl.href, '_blank');
      },
      pingpaishiping(){
        let routeUrl = this.$router.resolve({
          path: 'jlb_sucaivadio',
          query: {'type': 3}
        });
        window.open(routeUrl.href, '_blank');
      },
      qitashiping(){
        let routeUrl = this.$router.resolve({
          path: 'jlb_sucaivadio',
          query: {'type': 4}
        });
        window.open(routeUrl.href, '_blank');
      }
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
